<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .username {
            position: absolute;
            left: 347px;
            top: 250px;
            border-radius: 5px;
            height: 24px;
        }

        button {
            background: transparent;
            outline: none;
            border: none;
            color: white;
        }

        .heroShow {
            width: 50px;
            height: 50px;
        }

        .sub {
            position: absolute;
            left: 351px;
            top: 288px;
            width: 126px;
            color: white;
            font-weight: bold;
            font-size: 18px;
        }



        .geme {
            position: relative;
        }

        .heroBtn {
            position: absolute;
            left: 45px;
            top: 8px;
            font-size: 14px;
        }

        .skinBtn {
            position: absolute;
            top: 8px;
            left: 105px;
            font-size: 14px;
        }

        .userView {
            position: absolute;
            /* width: 80px; */
            top: 34px;
            left: 720px;
        }

        .userView img {
            width: 40px;
            height: 40px;
        }

        .chioseusername {
            display: block;
            color: rgb(255, 215, 0);
            text-align: center;
            font-size: 12px;
            font-weight: bold;
        }

        .skillsView {
            position: absolute;
            display: flex;
            flex-direction: column;
            left: 660px;
            top: 200px;
        }

        .skillsView img {
            width: 40px;
            height: 40px;
            margin-bottom: 10px;
        }

        .heroView {
            width: 120px;
            position: absolute;
            margin-top: 40px;
            margin-left: 20px;
            display: flex;
            flex-wrap: wrap;
        }

        .skinView {
            width: 130px;
            position: absolute;
            margin-top: 40px;
            margin-left: 20px;
            display: flex;
            flex-wrap: wrap;
        }

        .heroView img {
            width: 50px;
            height: 50px;

        }

        .skinView img {
            width: 50px;
            height: 50px;
        }

        .heroItem {
            margin-left: 10px;
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            color: gray;
            align-items: center;
            font-size: 12px;
        }

        .skinItem {
            margin-left: 10px;
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            color: gray;
            align-items: center;
            font-size: 12px;
        }

        .skinShow {
            position: absolute;
            left: 320px;
            top: 40px;
        }

        .login {
            display: block;
        }

        .game {
            display: none;
        }

        .heroContainer {
            display: block;
        }

        .skinContainer {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 登录页面 -->
    <div class="login">
        <input class="username" /> <button class="sub">登录</button>
        <img src="./sources/login.JPG" alt="">
    </div>
    <!-- 游戏选择页面 -->
    <div class="game">
        <button class="heroBtn">英雄</button>
        <div class="heroContainer">
            <div class="heroView">
                <div class="heroItem">
                    <img src="./sources/heroes/yase1.png" />
                    <span>亚瑟</span>
                </div>
                <div class="heroItem">
                    <img src="./sources/heroes/luban1.png" />
                    <span>鲁班七号</span>
                </div>
            </div>
        </div>

        <button class="skinBtn">皮肤</button>
        <div class="skinContainer">
            <div class="skinView">
                <div class="skinItem">
                    <img src="./sources/heroes/yase1.png" />
                    <span>经典</span>
                </div>
                <div class="skinItem">
                    <img src="./sources/heroes/yase2.png" />
                    <span>死亡骑士</span>
                </div>
            </div>
        </div>

        <div class="skinShow">
            <img src="./sources/skins/301660.png" alt="">
        </div>
        <div class="userView">
            <div class="heroShow">
                <img src="./sources/heroes/yase1.png" />
            </div>
            <span class="chioseusername">张三</span>
        </div>

        <div class="skillsView">
            <img src="./sources/skills/11210.png" />
            <img src="./sources/skills/11220.png" />
            <img src="./sources/skills/11230.png" />
        </div>
        <div>

        </div>
        <img src="./sources/chiose.JPG" />
    </div>
    <script>
        /* 
        英雄  技能  皮肤 
        玩家  游戏管理 （组织逻辑的）

        只有数据
        */
        // Game{
        //     login(){
        //          player:{
        //         heroes:[
        //             {
        //                 亚瑟
        //                 skills:【技能一、技能二、技能三】
        //                 skins:【皮肤一、皮肤二、皮肤三..】
        //                 ico:''
        //             }
        //             {
        //                 鲁班
        //                 skills:
        //                 skins
        //             }
        //         ]
        //     }
        //     }
        // }
        


        let button = document.querySelector('.sub');
        let input = document.querySelector('.username');
        let game = document.querySelector('.game');
        let login = document.querySelector('.login');
        let chioseusername = document.querySelector('.chioseusername');

        let heroItem = document.querySelectorAll('.heroItem'); // 英雄
        let headPortrait = document.querySelector('.heroShow img'); // 头像
        let skinShow = document.querySelector('.skinShow img'); // 英雄界面和皮肤界面

        let heroBtn = document.querySelector('.heroBtn'); // 选择英雄
        let heroContainer = document.querySelector('.heroContainer'); // 选择英雄的界面
        let skinBtn = document.querySelector('.skinBtn'); // 选择皮肤
        let skinContainer = document.querySelector('.skinContainer'); // 选择皮肤的界面

        // console.log(skinShow);
        button.onclick = (() => {
            if (input.value.trim() != '') {
                game.style.display = 'block';
                login.style.display = 'none';
                chioseusername.innerText = input.value;

                // 切换英雄头像和界面
                heroItem.forEach(function (item, index) {
                    // console.log(item);
                    item.onclick = (() => {
                        if (index) {
                            headPortrait.src = "./sources/heroes/luban1.png";
                            skinShow.src = "./sources/skins/301120.png";
                        } else {
                            headPortrait.src = "./sources/heroes/yase1.png";
                            skinShow.src = "./sources/skins/301660.png";
                        }
                    })
                })

                // 切换英雄和皮肤
                // 英雄切换
                heroBtn.onclick = (() => {
                    skinContainer.style.display = 'none';
                    heroContainer.style.display = 'block';
                })
                // 皮肤切换
                skinBtn.onclick = (() => {
                    skinContainer.style.display = 'block';
                    heroContainer.style.display = 'none';
                    if (skinShow.src === "./sources/skins/301120.png") {
                        console.log('鲁班的原始皮肤');
                        skinShow.src = "./sources/skins/301120.png"; // 鲁班的原始皮肤
                    } else {
                        skinShow.src = "./sources/skins/301660.png"; // 亚瑟的原始皮肤
                        console.log(skinShow.src);
                    }
                })

            }
        })













    </script>
</body>

</html>